<template>
    <div class="messageMuch">
        <div style="padding: 0px 15px 15px 15px;border: 1px solid #ccc;border-radius: 15px;">
            <el-tag v-for="tag in store.$state.Much" :key="tag.name" :closable="true" :type="tag.type">
                {{ '@' + tag.username }}
            </el-tag>
        </div>
        <div style="padding: 15px;display: flex;align-items: center;">
            <div style="margin-right: 10px;">消息等级</div>
            <el-select v-model="ruleForm.type" placeholder="Activity zone" style="width: 200px;">
                <el-option label="通知消息" :value="1" />
                <el-option label="提示消息" :value="2" />
                <el-option label="重要消息" :value="3" />
                <el-option label="紧急消息" :value="4" />
            </el-select>
        </div>
        <div style="display: flex;padding: 15px;">
            <div style="width: 75px;">通知内容</div>
            <el-input v-model="ruleForm.content" type="textarea" />
        </div>
        <div style="display: flex;justify-content: right;padding: 15px 15px 0px 15px">
            <el-button @click="store.$state.dialogVisible = false">取消</el-button>
            <el-button style="background-color: #2752fb;color: white;" @click="entercontent">发送通知</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useStore } from '@/stores/counter'
import { sendNotice } from '@/api/staff'
import { ElMessage } from 'element-plus'
const store = useStore()
interface ruleForm {
    userIds: string[],
    type: number,
    content: string
}
let ruleForm = ref<ruleForm>({
    userIds: [],
    type: 1,
    content: ''
})
// 群发通知
const entercontent = () => {
    // ruleForm.value.userId = 
    store.$state.Much.forEach((item: any) => {
        ruleForm.value.userIds.push(item.id)
    })
    sendNotice(ruleForm.value).then(res => {
        if (res.data.success) {
            store.$state.dialogVisible = false
            ElMessage({
                message: res.data.message,
                type: 'success'
            })
            store.$state.Much = []
            store.$state.dialogVisible = false
        } else {
            ElMessage({
                message: res.data.message,
                type: 'error'
            })
        }
    }).catch((err: any) => {
        console.log(err);
    })
}
</script>

<style scoped>
@import '../../assets/rule.css'
</style>